<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="/${initParam.context_root }/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#all_location").bind("change", function(){
			if(this.checked){
				$("input[name=byLocation]").attr("checked", true);
			}else{
				$("input[name=byLocation]").attr("checked", false);
			}
		});
		$("#all_category").bind("change", function(){
			if(this.checked){
				$("input[name=byCategory]").attr("checked", true);
			}else{
				$("input[name=byCategory]").attr("checked", false);
			}
		});
		$("#searchbtn").bind("click", function(){
			//선택사항 체크 여부 로직
			var isChecked = false;
			$.each($("input[name=byLocation]"), function(){
				if(this.checked){
					isChecked = true;
				}
			});
			if(isChecked==false){
				alert("지역 항목을 1개 이상 체크해 주세요");
				return false;
			}
			isChecked = false;
			$.each($("input[name=byCategory]"), function(){
				if(this.checked){
					isChecked = true;
				}
			});
			if(isChecked==false){
				alert("카테고리항목을 1개 이상 체크해 주세요");
				return false;
			}
			
			$.ajax({
				"url":"todayCoupon_search.do",
				"type":"post",
				"data":$("input[name=byLocation]").serialize()+"&"+$("input[name=byCategory]").serialize(),
				dataType:"JSON",
				error:function(xhr){
					alert("에러 : "+xhr.status);
				},
				success:function(jobj, xhr){
					
					var txt = "";
					$.each(jobj.paging.list, function(i, obj){
						txt = txt + "<tr>";
						txt = txt + "<td rowspan='2' width='5%'>" + obj.productId + "</td>";
						txt = txt + "<td rowspan='2' width='10%'>" + obj.saleLocation + "</td>";
						txt = txt + "<td rowspan='2' width='23%'><img src=/${initParam.context_root }/upfile/" + obj.productImageFilename +" width=200 height=100></td>";
						txt = txt + "<td width='27%'>" + obj.productName + "</td>";
						txt = txt + "<td rowspan='2' width='10%'>" + obj.stockEA + "</td>";
						txt = txt + "<td rowspan='2' width='10%'> <strike>" + obj.originalPrice + "원</strike><br>"+ obj.reducedPrice + "원<br><font color='red'>"+obj.reducedRate+"%할인!</font></td>";
						txt = txt + "<td rowspan='2' width='10%'>" + obj.registerDate + "</td>";
						txt = txt + "<td rowspan='2' width='5%'>" + obj.readCnt + "</td>";
						txt = txt + "</tr><tr>";
						txt = txt + "<td width='27%'>" + obj.useStartDate +" ~ " +  obj.useEndDate + "</td>";
						txt = txt + "</tr>";
					});

					$("#tbody").html(txt);
					
					// tr에 mouseover 시 이벤트 처리
					$("#tbody tr:nth-child(2n-1)").hover(function(){//mouseover
						$(this).css("background", "red").next().css("background", "red");
					},function(){//mouseout
						$(this).css("background", "none").next().css("background", "none");
					});
					$("#tbody tr").click(function(){
						var id = $(this).children(":eq(0)").text();
						$("#productId").attr("value", id);
						$("#sendForm").submit();
					});
					$("#tbody tr:nth-child(2n)").hover(function(){//mouseover
						$(this).css("background", "red").prev().css("background", "red");
					},function(){//mouseout
						$(this).css("background", "none").prev().css("background", "none");
					});
				}
			});	
		});
	});
</script>
<br><br>
<table border="1">
	<tr>
		<td>지역별</td>
		<td colspan="2">	
			전부<input type="checkbox" id="all_location">&nbsp;
			<c:forEach items="${requestScope.list.location }" var="list">
				${list }<input type="checkbox" name="byLocation" value="${list }">&nbsp;
			</c:forEach>
		</td>
	</tr>
	<tr>
		<td>카테고리</td>
		<td>
			전부<input type="checkbox" id="all_category">&nbsp;
			<c:forEach items="${requestScope.list.category }" var="list">
				${list }<input type="checkbox" name="byCategory" value="${list }">&nbsp;
			</c:forEach>
		</td>
		<td><input type="button" id="searchbtn" value="검색"></td>
	</tr>
</table>
<form id="sendForm" method="post" action="product_detail.do">
<input type="hidden" id="productId" name="productId">
<table border="1">
	<thead>
	<tr>
		<td rowspan="2" width="5%" bgcolor="lightgray">목록</td>
		<td rowspan="2" width="10%" bgcolor="lightgray">지역</td>
		<td rowspan="2" width="23%" bgcolor="lightgray">이미지</td>
		<td width="27%" bgcolor="lightgray">상품명</td>
		<td rowspan="2" width="10%" bgcolor="lightgray">판매량</td>
		<td rowspan="2" width="10%" bgcolor="lightgray">가격</td>
		<td rowspan="2" width="10%" bgcolor="lightgray">등록일</td>
		<td rowspan="2" width="5%" bgcolor="lightgray">조회수</td>
	</tr>
	<tr> 
		<td width="27%" bgcolor="lightgray">기간</td>
	</tr>
	</thead>
	<tbody id="tbody">
	</tbody>
</table>
</form>